因為最近地震很多，想說來玩玩看製作一個地震效果的特效，這次是使用ol-ext提供的function來玩，我把一些會影響理解的地方刪除了，這樣應該可以快速使用吧?

參考資料：https://viglino.github.io/ol-ext/examples/animation/map.pulse.html

記得要加入ol-ext的js與css喔

JS

const map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      source: new ol.source.XYZ({
        url: "https://wmts.nlsc.gov.tw/wmts/EMAP5/default/EPSG:3857/{z}/{y}/{x}.png",
        crossOrigin: "anonymous",
        minZoom: 6,
        maxZoom: 20,
      }),
    }),
  ],
  target: "map",
  view: new ol.View({
    projection: "EPSG:3857",
    center: ol.proj.fromLonLat([120.846642, 23.488793]),
    zoom: 7.5,
    maxZoom: 20,
    minZoom: 5,
    enableRotation: false,
  }),
  controls: [],
});

// Pulse feature at coord
function pulseFeature(coord){
  var f = new ol.Feature (new ol.geom.Point(coord)); // 新增一個 feature
  f.setStyle ( // 設定 featurestyle
      new ol.style.Style({
      image: new ol.style.Circle({
        radius: 30, 
        points: 4,
        stroke: new ol.style.Stroke ({ color: 'red', width:2 })
      })
    })
);
  map.animateFeature (f, new ol.featureAnimation.Zoom({ // ol-ext提供的方法
    fade: ol.easing.easeOut, 
    duration: 3000, 
    easing: ol.easing['easeOut'] 
  }));
}

function pulse(lonlat) {
  let nb = 3;
  for (var i=0; i<nb; i++) {
    setTimeout (function() { // setTimout js 的 API
      pulseFeature (
        ol.proj.transform( // transform api 
          lonlat,  // extent 想轉換的座標
          'EPSG:4326', // source 原本的座標系統
          map.getView().getProjection() // destination 轉換的座標系統
        ));
    }, i*500);
  };
}

pulse([121, 23])

參考連結

https://github.com/weijung0923/learning-openlayers-micromastery/tree/day17